<template>
  <view class="container">
    <view class="header">
      <text class="title">选择位置</text>
    </view>
    
    <!-- 测试逆地理编码功能 -->
    <view class="test-section">
      <button class="test-btn" @click="testReverseGeocoding">测试逆地理编码</button>
      <view class="test-result" v-if="testResult">
        <text class="result-title">测试结果：</text>
        <text class="result-text">{{ testResult }}</text>
      </view>
    </view>
    
    <scroll-view class="location-list" scroll-y>
      <view 
        class="location-item" 
        v-for="(item, index) in locationList" 
        :key="index"
        @click="selectLocation(item)"
      >
        <text class="location-name">{{ item.name }}</text>
        <text class="location-selected" v-if="selectedLocation && selectedLocation.id === item.id">✓</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { fetchLocationList, getLocationAddress, getRealTimeLocation } from '@/utils/location.js';

const selectedLocation = ref(null);
const locationList = ref([]);
const isLoading = ref(true);
const testResult = ref('');

onMounted(async () => {
  try {
    locationList.value = await fetchLocationList();
  } catch (error) {
    console.error('获取位置列表失败:', error);
  } finally {
    isLoading.value = false;
  }
});

const selectLocation = (location) => {
  selectedLocation.value = location;
  uni.$emit('locationSelected', location);
  uni.navigateBack();
};

// 测试逆地理编码功能
const testReverseGeocoding = async () => {
  try {
    testResult.value = '正在获取位置...';
    
    // 先获取当前位置
    const location = await getRealTimeLocation();
    console.log('获取到位置:', location);
    
    testResult.value = '正在解析地址...';
    
    // 使用腾讯地图SDK进行逆地理编码
    const address = await getLocationAddress(location.latitude, location.longitude);
    console.log('逆地理编码结果:', address);
    
    testResult.value = `位置: ${location.latitude}, ${location.longitude}\n地址: ${address}`;
    
  } catch (error) {
    console.error('测试逆地理编码失败:', error);
    testResult.value = `测试失败: ${error.message}`;
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #fafafa;
  min-height: 100vh;
}

.header {
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.test-section {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .test-btn {
    width: 100%;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 32rpx;
    margin-bottom: 20rpx;
    
    &:active {
      background-color: #0056cc;
    }
  }
  
  .test-result {
    padding: 20rpx;
    background-color: #f8f9fa;
    border-radius: 8rpx;
    border-left: 4rpx solid #007aff;
    
    .result-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .result-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
      white-space: pre-line;
    }
  }
}

.location-list {
  max-height: calc(100vh - 350rpx);
  
  .location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    &:active {
      transform: scale(0.98);
    }
    
    .location-name {
      font-size: 32rpx;
      color: #333;
    }
    
    .location-selected {
      color: #ff6b6b;
      font-size: 36rpx;
    }
  }
}
</style>